<header class="hero-7" title="hero-7">
 
	<div class="container">
		  <div>
			<div class="row align-items-center justify-content-center text-start g-5">
			  <div class="col-lg-5">
				<img src="img/demo/video-1.jpg" class="shadow img-thumbnail">
			  </div>

			  <div class="col-lg-7">
				<h1 class="heading text-white mb-3 display-3 fw-bold" data-aos="fade-up" data-aos-delay="100">Open source CMS reinvented</h1>
				<h2 class="text-white h3" data-aos="fade-up" data-aos-delay="100">Powerful and easy to use drag and drop builder for blogs,<br> websites or ecommerce stores.</h2>
				

				<div class="buttons mt-4" data-aos="fade-up" data-aos-delay="300">
				  <a href="https://www.vvveb.com" class="btn btn-success text-white btn-lg">
					<span>⚡</span>
					<span>Free Download</span>
					<b>›</b>
				  </a>
				  <a href="https://demo.vvveb.com" class="btn btn-white text-white  btn-lg">Live Demo</a>
				</div>


			  </div>
			</div>
		  </div>
		</div>
  
    <div class="separator bottom">
		
		<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 41" width="100%" preserveAspectRatio="none"><defs><style>.cls-1{fill:var(--bs-body-bg);}</style></defs><title>rough-edges-bottom</title><path class="cls-1" d="M0,185l125-26,33,17,58-12s54,19,55,19,50-11,50-11l56,6,60-8,63,15v15H0Z" transform="translate(0 -159)"/></svg>
		
    </div>

   <div class="overlay">
    </div>

   <div class="background-container">
		<img src="img/demo/hero-3.jpg" alt="Hero background">
	</div>
</header>
